body {
    background: linear-gradient(45deg, rgb(254, 24, 147), var(--blue));
}

/* 版心样式 */
.container {
    width: 80%;
    margin: 100px auto;
    display: flex;
    gap: 2px;
}


/* 设置左侧卡片的样式 */
.card {
    position: sticky;
    top: 20px;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* width: 455px;
    height: 400px; */
    align-self: flex-start;
    background-color: var(--white);
    padding: 20px 30px;
    /* overflow: hidden; */

}

.card .pic {
    margin-top: 20px;
    margin-bottom: 5px;
}

.card .pic img {
    width: 150px;
    height: 150px;
    border: 1px solid black;
    border-radius: 100%;
    object-fit: cover;
}

.card h3 {
    margin-bottom: 5px;
    font-size: 20px;
}

.card span {
    color: var(--blue);
    margin-top: 5px;
    margin-bottom: 10px;
}

.card .contact {
    display: flex;
    gap: 5px;
    margin-block: 8px;
}

.card li {
    background-color: var(--light-bg);
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    line-height: 50px;
    border-radius: 100%;
}

.card .btn {
    background-color: var(--blue);
    color: var(--white);
    padding: 10px 27px;
    border-radius: 4px;
    margin-block: 13px;
}

/* 设置右侧版块的样式 */
.main {
    display: flex;
    background-color: var(--white);
    width: 1105px;
    justify-content: center;
}

.main .content {

    width: 90%;

}
.main .content h1 {
    font-size: 25px;
    color: var(--blue);
    padding-block: 5px;
}

/* 设置个人介绍模块的样式 */
.self-introduction {
    margin-block: 10px;

}

.self-introduction p {
    color: var(--light-color);
    font-size: 18px;
    line-height: 2;
    margin-block: 10px;
}

.self-introduction .details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    line-height: 3;
    font-size: 16px;
    font-weight: 700;

}


.self-introduction .details span {
    color: var(--light-color);
}

.self-introduction .details span {
    color: var(--light-color);
}

/* 设置技术栈模块的样式 */
.skill .icon {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-between;
    align-items: center;
}

.skill .icon li {
    margin-block: 10px;
    border-radius: 5px;
    background-color: var(--light-bg);
    padding: 25px 30px;
}

.skill .icon img {
    width: 50px;
    height: 50px;

}

/* 设置技能熟练度模块的样式 */
.capacity .level {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
}

.capacity .level .item {
    margin-block: 5px;
    padding-right: 10px;
}

.capacity .level .down {
    width: 100%;
    height: 10px;
    background: var(--light-bg);
    border-radius: 5px;
}

.capacity .level .top1 {
    width: 95%;
    height: 10px;
    background: var(--blue);
    border-radius: 5px;
}

.capacity .level .top2 {
    width: 90%;
    height: 10px;
    background: var(--blue);
    border-radius: 5px;
}

.capacity .level .top3 {
    width: 80%;
    height: 10px;
    background: var(--blue);
    border-radius: 5px;
}

.capacity .level .top4 {
    width: 75%;
    height: 10px;
    background: var(--blue);
    border-radius: 5px;
}

.capacity .level .top5 {
    width: 65%;
    height: 10px;
    background: var(--blue);
    border-radius: 5px;
}

.capacity .level .top6 {
    width: 70%;
    height: 10px;
    background: var(--blue);
    border-radius: 5px;
}

.capacity .level .item .text {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    margin-block: 10px;
}

.level .item .text .right {
    color: var(--light-color);
}

/* 设置学习工作经历模块的样式 */
.experience .text-area {
    background-color: var(--light-bg);
    border-radius: 15px;
    padding: 20px 20px;
    margin-block: 20px;
}

.experience h2 {
    font-size: 20px;
}

.experience span {
    color: var(--blue);
    margin-block: 5px;
    font-size: 15px;
}

.experience p {
    color: var(--light-color);
    font-size: 15px;
    margin-block: 5px;
    line-height: 2;
}

/* 设置联系方式模块的样式 */
.contact {

    margin-block: 40px;

}

.contact h1 {
    margin-bottom: 15px;
}

.contact .item {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;

}

.contact .item li {
    display: flex;
    align-items: center;
}

.contact .item .icon {
    background-color: var(--blue);
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    /* font-size: 30px; */
    color: var(--white);
    border-radius: 100%;
}

.contact .item .info {
    margin-left: 10px;
}

.contact .item .info span {
    display: block;
    margin-top: 15px;
}

/* 设置响应式布局样式 */
/* 1.屏幕尺寸小于1200像素*/
@media screen and (max-width:1200px) {
    .container {
        margin-block: 20px;
        flex-direction: column;
        width: 96%;
    }

    .card {
        position: static;
        margin: 0 auto;
        border-radius: 5px;
    }

    .main {
        width: 100%;
        margin-top: 20px;
        border-radius: 5px;
    }


}

/* 2.屏幕尺寸小于800像素 */
@media screen and (max-width:800px) {
    .self-introduction .details {
        grid-template-columns: 1fr;

    }

    .capacity .level {
        grid-template-columns: 1fr;
    }

    .contact .item {
        grid-template-columns: 1fr;
    }

    .contact .item li {
        margin-block: 10px;
    }
}